<template>
    <div class="login">
        <div class="head_icon">
            <img src="../assets/pic/head_icon.svg">
        </div>
        <input type="text" placeholder="请输入手机号" v-model="phone" :class="{active:phoneAct}">
        <p :class="{tips:true,tips_active:phoneAct}">请输入13位手机号</p>
        <input type="text" placeholder="请输入用户名" v-model="name" :class="{active:nameAct}">
        <p :class="{tips:true,tips_active:nameAct}">用户名字母开头，5-16个字符，只允许字母数字下划线</p>
        <input type="password" placeholder="请输入密码" v-model="psd1" :class="{active:psd1Act}">
        <p :class="{tips:true,tips_active:psd1Act}">密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线</p>
        <input type="password" placeholder="确认密码" v-model="psd2" :class="{active:psd2Act}">
        <p :class="{tips:true,tips_active:psd2Act}">两次输入的密码不一致</p>
        <button @click="register">注册</button>
        <div class="others">
            <router-link to="/login">已有账号去登录</router-link>
        </div>
    </div>
</template>

<script setup>
    import { regPhone,regPsd,regName } from "../utils/Reg.js"
    import { request } from "../utils/Request.js";
    import { ref,reactive,toRefs } from "vue";
    import { useStore } from 'vuex';
    import { useRouter }  from 'vue-router';
    const router=new useRouter();
    const store=useStore();

    let phone=ref('')
    let name=ref('')
    let psd1=ref('')
    let psd2=ref('')
    let iptAct=reactive({
        'phoneAct':false,
        'nameAct':false,
        'psd1Act':false,
        'psd2Act':false,
    })
    let { phoneAct,nameAct,psd1Act,psd2Act } = toRefs(iptAct)
    const register=async()=>{
        const res=reactive({
            'phone':regPhone(phone),
            'name':regName(name),
            'psd1':regPsd(psd1),
            'psd2':psd1.value===psd2.value,
        })
        for (const key in res) {
            iptAct[`${key}Act`]=!res[key]
        }
        if (res.phone&&res.name&&res.psd1&&res.psd2) {
            await request('/register',{
                "name":name.value,
                "password":psd1.value,
                "phone":phone.value
            })
            store.dispatch('user/changeIsLogin',{
                'phone':phone.value,
                'password':psd1.value
            })
            router.push('/mine')
        }
    }
</script>

<style lang="scss" scoped>
    @import "../style/base.scss";
    .login{
        box-sizing: border-box;
        margin: 0 auto;
        width: 3.39rem;
        padding: 0 .22rem;
        .head_icon{
            margin: 1.2rem auto .4rem;
            width: .66rem;
            height: .66rem;
            border-radius: 50%;
            background-color: teal;
        }
        input{
            box-sizing: border-box;
            margin: 0 auto;
            width: 2.95rem;
            height: .48rem;
            background: #F9F9F9;
            border: .01rem solid rgba(0,0,0,0.10);
            border-radius: .06rem;
            font-family: PingFangSC-Regular;
            font-size: .16rem;
            color: rgba($color: #000000, $alpha: 0.5);
            text-indent: 1em;
            outline: none;
        }
        .active{
            border-color: red;
        }
        .tips{
            margin: .04rem auto;
            width: 100%;
            height: .12rem;
            line-height: .12rem;
            font-family: PingFangSC-Regular;
            font-size: .12rem;
            color: red;
            visibility: hidden;
        }
        .tips_active{
            visibility: visible;
        }
        button{
            margin: .16rem auto;
            width: 2.95rem;
            height: .48rem;
            background: #0091FF;
            box-shadow: 0 .04rem .08rem 0 rgba(0,145,255,0.32);
            border-radius: .04rem;
            border: none;
            font-size: .16rem;
            color: #FFFFFF;
        }
        .others{
            position: relative;
            width: 100%;
            height: .2rem;
            @include flexSet(center,center,none);
            
            a{
                display: block;
                width: 1rem;
                height: .2rem;
                line-height: .2rem;
                font-size: .14rem;
                color: rgba(0,0,0,0.50);
            }
        }

    }
</style>